<template>
  <c-main-template :isBreadcrumb="false">
    <div class="forget-content_template">
      <div class="forget-content">
        <c-time-line
          :active="active"
          :list="['验证身份', '设置支付密码', '完成']"
        />
        <div v-show="active === 0" class="verify-identity">
          <c-verify-identity @change="handleModuleChange" />
        </div>
        <c-change-password @change="handleModuleChange" v-show="active === 1" />
        <c-change-success @change="handleModuleChange" v-show="active === 2" />
      </div>
    </div>
  </c-main-template>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getLocalStorage } from "@/utils/cache";
import cTimeLine from "@/components/TimeLine/index.vue";
import cVerifyIdentity from "./components/VerifyIdentity.vue";
import cChangePassword from "./components/ChangePassword.vue";
import cChangeSuccess from "./components/ChangeSuccess.vue";
const active = ref(0);
const router = useRouter();
onMounted(() => {
  const user = getLocalStorage("USER_INFO");
  // if (user && user.payPassword) {
  //   active.value = 2;
  // }
});
const handleModuleChange = (num) => {
  if (num != null) {
    active.value = num;
  } else if (active.value < 2) {
    active.value += 1;
  } else if (active.value === 2) {
    router.push("/Home");
  }
};
</script>
<style lang="less" scoped>
.forget-content_template {
  width: 100%;
  margin-top: 10px;
  border-radius: 3px;
  padding: 18px 20px;
  .forget-content {
    margin: 80px auto 70px auto;
    width: 35%;
    .forget-content_tips {
      margin-top: 70px;
      background: rgba(0, 0, 0, 0.02);
      padding: 12px 30px;
      font-size: 12px;
      color: #8c8c8c;
      line-height: 26px;
    }
  }
}
</style>